<template>
<scroll-view scroll-y class="main">
    <view>
       <!-- <u-scroll-list> -->
       <view>
         <!-- 标签 -->
        <view class="uTabs">
            <u-tabs @click="uTabs" :list="list2" lineColor="red" lineWidth="38" lineHeight="2"  itemStyle="padding-left: 18px; padding-right: 15px; height: 34px;"></u-tabs>
        </view>
        <!-- 订单 -->

       <!-- <view v-for="(item, index) in list" :key="index"> -->
        <view class="card" :src="item.thumb" v-for="item in newObject" :key="item.id">
          <view class="card-top">
            <p>{{item.createTime}}</p> 
            <span>{{condition(item.orderState)}}</span>
          </view>
          <view class="introduce" v-for="sku in item.skus" :key="sku.id">
            <view> 
                <img class="picture" :src="sku.image" alt="">
            </view>
            <view class="introduce-right">
                <view class="introduce-text">
                    <p>{{sku.name}}</p>
                    <span>{{sku.attrsText}}</span>
                </view>
            </view>
          </view>
          <view class="card-bottom">
            <span class="total">共{{item.totalNum}}件商品</span>
            <p>实付<span>￥{{item.totalMoney}}</span></p>
          </view>
          <view class="button">
            <view class="button-left" @click="cancel">取消订单</view>
            <view class="button-right" @click="cancel">再次购买</view>
          </view>
         </view>
        </view>
       </view>
       <!-- </u-scroll-list> -->
    <!-- </view> -->
    </scroll-view>
</template>

<script>
import { setHeader } from "../../utils/request";
    export default {
        data() {
            return {
                list2: [{
                    name: '全部',
                }, {
                    name: '待付款',
                }, {
                    name: '待发货',
                }, {
                    name: '待收货',
                },{
                   name: '待评价',
                }
                ],
                parameters: {
                    page: 1,
                    pageSize: 10,
                    orderState: 0,
                },
                newObject:{}, //外层卡片
            }
        },
      async onLoad(){
          await this.loginWxmin(); //获取 token
          await this.getMemberOrder() // 获取订单列表
        },
       
        methods:{
            // 发请求或取token
            async loginWxmin() {
            try {
                // 登录请求
                const {
                result: { token },
                result,
                } = await uni.$u.http.post("/login/wxMin/simple", {
                phoneNumber: "16868686868",
                });
                // console.log(result,999);
                setHeader({ Authorization: token });
                wx.setStorage(userInfo, result);
            } catch (error) {}
            },
            // 获取订单列表
           async getMemberOrder(){
            const res = await uni.$u.http.get("/member/order",{
               params:this.parameters
            })
            // console.log(res,"获取订单列表");
            this.newObject = res.result.items 
           },
          //  点击切换
            uTabs(item) {
            this.parameters.orderState = item.index;  // 切换有延迟
            this.getMemberOrder()
            },
            
            // 点击取消
            cancel(){
              uni.showToast({
                title:"接口正在开发中~",
                icon:"none"
             })
            },
            condition(orderState){
                const obj = {
                   1 : "待付款" ,
                   2 : "待发货" ,
                   3 : "待收货" ,
                   4 : "待评价" ,
                   5 : "已完成" ,
                }
                return obj[orderState]
            },
        }
    }
</script>

<style lang="scss">
.main{
    height: 100vh;
    background-color: #f4f4f4;
}
  .uTabs{
     display: flex;
     align-items: center;
     height: 100rpx;
     margin-bottom: 10px;
     border-bottom: 1px solid #f0f0f0;
  }
  .card{
    background-color: #fff;
    margin: 10px 10px 0;
    padding: 10px 10px 0;
    .card-top{
     display: flex;
     justify-content: space-between;
     color: #bababa;
    }
    .introduce{
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .picture{
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: pink;
        }
        .introduce-right{
            flex: 1;
            font-size: 13px;
            .introduce-text{
              
              p{
                margin: 15px 0 35px;
                color: #606060;
              }
              span{
               padding: 5px 10px;
               color: #a6a6a6;
               background-color: #f7f7f8;
              }
            }
        }
    }
    .card-bottom{
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        .total{
            color: #b0b0b0;
            font-size: 14px;
            margin-right: 10px;
        }
        p{
          color: #b0b0b0;
          font-size: 16px;
          span{
            color: #5e5e5e;
          }
        }
    }
    .button{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 40px;
        padding: 5px;
        margin-top: 8px;
        border-top: 1px solid #f1f1f1;
        .button-left{
           width: 110px;
           height: 30px; 
           text-align: center;
           line-height: 30px;
           font-size: 14px;
           border: 1px solid #d3d3d3;
           border-radius: 15px;
           margin-right: 12px;
        }
        .button-right{
           width: 110px;
           height: 30px; 
           text-align: center;
           line-height: 30px;
           color: #2ebc9e;
           font-size: 14px;
           border: 1px solid #2ebc9e;
           border-radius: 15px;
        }
    }
  }
</style>
